<link rel="stylesheet" href="__CDN__/assets/addons/calendar/fullcalendar/dist/fullcalendar.css">
<style>
    .fc-day.selected {
        background: #e0f2be !important;
    }

    .fc-event.fc-completed {
        text-decoration: line-through;
    }

    .fc-event.fc-expired {
        background: #999 !important;
        border-color: #999 !important;
    }

    .calendar-trash {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 100%;
        height: 52px;
        text-align: center;
        line-height: 52px;
        color: #e74c3c;
        background-color: #f2dede;
        display: none;
    }

    .fc .fc-toolbar .calendar-trash .fa {
        font-size: 20px;
        display: inline-block;
        vertical-align: middle;
    }

    .fc .fc-toolbar .calendar-trash > * {
        float: none
    }

    body .dialog-event .layui-layer-content {
        padding: 15px;
    }
    #add-form .msg-box {
        position: absolute;
        top: -25px;
        right: 0;
    }

    #add-form.n-default .msg-wrap {
        position: relative;
    }

    ul.fc-color-picker li a {
        position: relative;
    }

    ul.fc-color-picker li a.active:after {
        font-family: FontAwesome;
        content: "\f00c";
        position: absolute;
        z-index: 1000;
        top: 4px;
        left: 7px;
        font-size: 11px;
        color: #fff;
    }

    .external-event a {
        color: #fff;
    }

    body {
        height: auto;
    }
</style>

<style data-render="darktheme">
    body.darktheme .box-header.with-border {
        color: #ccc;
        border-color: #404040;
    }

    body.darktheme .fc-unthemed th, body.darktheme .fc-unthemed td, body.darktheme .fc-unthemed thead,
    body.darktheme .fc-unthemed tbody, body.darktheme .fc-unthemed .fc-divider,
    body.darktheme .fc-unthemed .fc-row, body.darktheme .fc-unthemed .fc-content,
    body.darktheme .fc-unthemed .fc-popover, body.darktheme .fc-unthemed .fc-list-view,
    body.darktheme .fc-unthemed .fc-list-heading td {
        border-color: #262626;
    }

    body.darktheme .fc-state-default {
        filter: invert(1) hue-rotate(180deg);
        background-image: none;
        box-shadow: none;
    }

    body.darktheme .fc-widget-header {
        background-color: #262626;
    }

    body.darktheme .fc-unthemed td.fc-today {
        background-color: #262626;
    }
    .sp_result_area{
        z-index: 100000000 !important;
    }

</style>

<div>
    <a class="btn btn-primary btn-danger" style="margin-top: 20px;  margin-left: 10px;" href="{:url('staff/staffclass')}">排班管理</a>
    <a class="btn btn-primary btn-addtabs"  style="margin-top: 20px; margin-left: 10px;" href="{:url('staff/classes')}"> 班次管理</a>
</div>
<section class="">
    <div class="row">
        <div class="col-md-3" style="display: none;">
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h4 class="box-title">{:__('Exist event')}</h4>
                </div>

                <div class="box-body">
                    <!-- the events -->

                </div>
                <!-- /.box-body -->
            </div>
            <!-- /. box -->
            <div class="box box-solid" >
                <div class="box-header with-border">
                    <h3 class="box-title">{:__('Add event')}</h3>
                </div>
                <div class="box-body ">
                </div>
            </div>
        </div>

        <!-- /.col -->
        <div class="col-md-12">
            <div class="box box-solid">
                <div class="box-body no-padding">
                    <div id="calendar"></div>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /. box -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>

<script type="text/html" id="dayrighttpl">
    <ul class="dropdown-menu fullcalendar-contextmenu" id="dayrightmenu">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-date="<%=date%>" data-action="add">添加事件</a></li>
    </ul>
</script>

<script type="text/html" id="eventrighttpl">
    <ul class="dropdown-menu fullcalendar-contextmenu" id="eventrightmenu">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-id="<%=id%>" data-action="edit">编辑</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-id="<%=id%>" data-action="normal">标记为未完成</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-id="<%=id%>" data-action="completed">标记为已完成</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-id="<%=id%>" data-action="delete">删除</a></li>
    </ul>
</script>

<script type="text/html" id="edittpl">
<!--    <form id="edit-form" action="staff/staffclass/add_staff/dateid/<%=dateid%>/date/<%=date%>" role="form" method="post">-->
<!--        <div class="input-group" >-->
<!--            <span class="input-group-addon"><i class="fa fa-list-ol fa-fw"></i></span>-->
<!--            <input  id="c-staff_id" min="0" data-rule="required" data-source="staff/staff/selectpage" data-field="name" class="form-control selectpage my-selectpage" name="row[staff_id]" type="text" value=""  placeholder="{:__('Staff_tips')}">-->
<!--        </div>-->
<!--        <div class="">-->
<!--            <button type="submit" class="btn btn-primary">{:__('Ok')}</button>-->
<!--            <button type="reset" class="btn btn-default">{:__('Reset')}</button>-->
<!--        </div>-->
<!--    </form>-->
</script>
